## **Description**

Adds a live blinking input cursor to the Ramp amount input screen (Buy
and Sell flows), matching the cursor behavior seen in the Swap and Send
screens.

The cursor is purely cosmetic — it blinks next to the amount text to
indicate the input is active. For Buy, the cursor appears after the
amount (e.g. `$100|`). For Sell, the cursor appears before the token
symbol (e.g. `12.5| ETH`). The display now shows the raw amount string
(e.g. `$100`) instead of the formatted value with decimals (e.g.
`$100.00`), providing a cleaner editing experience.

## **Changelog**

CHANGELOG entry: Added a live blinking cursor to the Ramp Buy and Sell
amount input screens for a more intuitive input experience.

## **Related issues**

Refs:
[TRAM-3335](https://consensyssoftware.atlassian.net/browse/TRAM-3335)

## **Manual testing steps**

```gherkin
Feature: Live input cursor on Ramp amount input

  Scenario: Buy screen shows blinking cursor after amount
    Given the user is in the Buy flow
    When the amount input screen is displayed (e.g. "$100")
    Then a blinking cursor appears after the amount text
    And the cursor is vertically centered with the numerical text

  Scenario: Sell screen shows blinking cursor before token symbol
    Given the user is in the Sell flow
    When the amount input screen is displayed (e.g. "12.5 ETH")
    Then a blinking cursor appears between the amount and the token symbol (e.g. "12.5| ETH")
    And the cursor does NOT appear after the token symbol

  Scenario: Buy screen displays raw amount without trailing decimals
    Given the user is in the Buy flow with default amount 100
    When the amount input screen is displayed
    Then the amount shows "$100" (not "$100.00")
    And the cursor blinks after the displayed amount

  Scenario: Keypad input works correctly with cursor
    Given the user is on the amount input screen
    When the user presses keypad digits
    Then the amount updates and the cursor remains at the end
    And backspace removes the last character as expected
```

## **Screenshots/Recordings**

### **Before**

<!-- Screenshot/video showing static amount display without cursor -->
<img width="355" height="683" alt="Screenshot 2026-03-11 140355"
src="https://github.com/user-attachments/assets/c6e090d6-afa0-4b70-9657-bc7517befda0"
/>

<img width="352" height="676" alt="Screenshot 2026-03-11 140423"
src="https://github.com/user-attachments/assets/9e216129-a228-486f-8a10-e781c282349e"
/>

### **After**

<!-- Screenshot/video showing blinking cursor on Buy and Sell screens
-->
<img width="342" height="626" alt="Screenshot 2026-03-11 132503"
src="https://github.com/user-attachments/assets/91d0fd57-86a3-4438-948d-cfcee011df8e"
/>



https://github.com/user-attachments/assets/8d813b25-e0bb-4efb-900c-881a3a065e81



https://github.com/user-attachments/assets/c469bef2-5864-4571-ae2f-678bdf4c332c



https://github.com/user-attachments/assets/ee150ac8-3028-4155-9cfd-986d534c6c1a



https://github.com/user-attachments/assets/2372e1ea-1f0d-4339-a98c-d53e076bf6e5









## **Pre-merge author checklist**

- [x] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile
Coding
Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [x] I've completed the PR template to the best of my ability
- [x] I've included tests if applicable
- [ ] I've documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [ ] I've applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [x] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [x] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.


<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> **Low Risk**
> Low risk UI-only change that adds a cosmetic blinking cursor and minor
formatting tweaks; main risk is small regressions in amount
display/accessibility labels or snapshot expectations.
> 
> **Overview**
> Adds a reusable `useBlinkingCursor` hook and wires it into Ramp amount
entry UIs to render a *cosmetic* blinking cursor.
> 
> Updates `Aggregator` `AmountInput` to show the cursor only when
`highlighted`, place it **after the amount for buy** and **before the
token symbol for sell** (new `tokenSymbol` prop), and adds an
`accessibilityLabel` for the amount. Updates unified Ramp `BuildQuote`
to split currency formatting into prefix/suffix and render the amount
with an animated cursor between them.
> 
> Extends test IDs and adds/updates unit tests and snapshots to cover
cursor visibility and updated rendering expectations.
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
ef97f00. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->